<template>
	<swiper class="image-container" previous-margin="45rpx" next-margin="45rpx" circular autoplay @change="swiperChange" s>
		<swiper-item :class="currentIndex == index ? 'swiper-item' : 'swiper-item-side'" v-for="(item, index) in imgList" :key="item[urlKey]" @tap="previewImage(index)" >
			<image @click="clickImg(item)" :class="currentIndex == index ? 'item-img' : 'item-img-side'" :src="item[urlKey]" lazy-load :style="dontFirstAnimation ? 'animation: none;' : ''" mode="aspectFill"></image> -->
<!--绘图
	<!-- 	 <canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas" id="firstCanvas"></canvas> -->
		</swiper-item>
		
	</swiper>
	
</template>
<script>
	export default {
		props: {
			erweimaimg:"",
			imgList: {
				type: Array,
				default() {
					return []
				}
			},
			urlKey: {
				type: String,
				default() {
					return ''
				}
			},
		},
		data() {
			return {
				currentIndex: 0,
				dontFirstAnimation: true
			}
		},
		 // onReady: function (e) {
		 //      var context = uni.createCanvasContext('firstCanvas')
		 				
		 //      context.setStrokeStyle("#00ff00")
		 //      context.setLineWidth(5)
		 //      context.rect(0, 0, 200, 200)
		 //      context.stroke()
		 //      context.setStrokeStyle("#ff0000")
		 //      context.setLineWidth(2)
		 //      context.moveTo(160, 100)
		 //      context.arc(100, 100, 60, 0, 2 * Math.PI, true)
		 //      context.moveTo(140, 100)
		 //      context.arc(100, 100, 40, 0, Math.PI, false)
		 //      context.moveTo(85, 80)
		 //      context.arc(80, 80, 5, 0, 2 * Math.PI, true)
		 //      context.moveTo(125, 80)
		 //      context.arc(120, 80, 5, 0, 2 * Math.PI, true)
		 //      context.stroke()
		 //      context.draw()
		 //  },
		onLoad() {
				console.log(props.erweimaimg)
				// var context = uni.createCanvasContext('firstCanvas')	
				// 	console.log(context)
				// ontext.setStrokeStyle("#00ff00")
				// context.setLineWidth(5)
				// context.rect(0, 0, 200, 200)
				// context.stroke()
				// context.setStrokeStyle("#ff0000")
				// context.setLineWidth(2)
				// context.moveTo(160, 100)
				// context.arc(100, 100, 60, 0, 2 * Math.PI, true)
				// context.moveTo(140, 100)
				// context.arc(100, 100, 40, 0, Math.PI, false)
				// context.moveTo(85, 80)
				// context.arc(80, 80, 5, 0, 2 * Math.PI, true)
				// context.moveTo(125, 80)
				// context.arc(120, 80, 5, 0, 2 * Math.PI, true)
				// context.stroke()
				// context.draw()
				
		},
		methods: {
			 canvasIdErrorCallback: function (e) {
			            console.error(e.detail.errMsg)
			        },
			swiperChange(e) {
				this.dontFirstAnimation = false
				this.currentIndex = e.detail.current
			},
			clickImg(item) {
				this.$emit('selected', item, this.currentIndex)
			},
			previewImage(index){
				console.log(this.imgList[index].url)
				var i =this.imgList[index].url  //获取当前页面的轮播图数据
						//uniapp预览轮播图
						uni.previewImage({
							current:index, //预览图片的下标
							urls:[i ]//预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
						})
			}
		}
	}
</script>
<style scoped>
	.image-container {
		width: 100%;
		height: 510upx;
	}

	.item-img {
		width: 285upx;
		height: 501upx;
		border-radius: 14rpx;
		animation: to-big .3s;
	}

	.swiper-item {
		width: 285upx;
		height: 501upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.item-img-side {
		width:2000upx;
		height:460upx;
		border-radius: 14rpx;
		animation: to-mini .3s;
	}

	.swiper-item-side {
		width: 2000upx;
		height:480upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	@keyframes to-mini
	{
		from {
			height: 501upx;
		}
		to {
			height: 480upx;
		}
	}
	@keyframes to-big
	{
		from {
			height: 480upx;
		}
		to {
			height: 501upx;
		}
	}
	.erweimaimg{
		height: 100upx;
		width: 100upx;
		position: absolute;
		bottom: 145upx;
		left: 280upx;
	}
</style>
